<template>
  <div>
    <!-- <el-upload
      class="upload-demo"
      ref="upload"
      action="http://127.0.0.1:3000/addsrc"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :auto-upload="false"
    > -->
    <el-upload
      class="upload-demo"
      ref="upload"
      action="http://127.0.0.1:3000/addsrc"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-button type="primary" @click="getGoodsDesc">下载</el-button>
    <el-button type="primary" @click="getInfo2">查询</el-button>

    <ul style="margin-top:50px">
      <li>
        图片
        <input type="text" v-model="urlxx" />
      </li>
      <li>
        姓名
        <input type="text" v-model="name" />
      </li>
      <li>
        key
        <input type="text" v-model="keyxx" />
      </li>
      <li>
        type
        <input type="text" v-model="typexx" />
      </li>
    </ul>
    <input type="button" value="post请求" @click="postInfo" />

    <div style="margin-bottom: 20px;margin-top:50px">
      <input type="text" placeholder="姓名" v-model="sename" />
      <input type="button" value="查询" @click="getInfo" />
    </div>
    <table border="1px" cellspacing="0" cellpadding="0" width="1000px" style="margin: 20px 0;">
      <tr>
        <th width="10%" style="text-align: center;">id</th>
        <th width="20%">路径</th>
        <th width="10%">图片</th>
        <th width="15%">姓名</th>
        <th width="15%">key</th>
        <th width="10%">type</th>
        <th width="20%" style="text-align: center;">操作</th>
      </tr>
      <tr v-for="item in stdymsg" :key="item.id">
        <td @dblclick="flag=!flag" align="center">
          <div v-if="flag" v-html="item.id"></div>
          <input v-else type="number" readonly="readonly" v-model="item.id" />
        </td>
        <td @dblclick="flag=!flag">
          <div v-if="flag" v-html="item.urlxx"></div>
          <input v-else type="text" v-model="item.urlxx" />
        </td>
        <td @dblclick="flag=!flag">
            <img width="50px" :src="'http://127.0.0.1:3000/uploads/' + item.keyxx + '.png'" alt="">
        </td>
        <td @dblclick="flag=!flag">
          <div v-if="flag" v-html="item.namexx"></div>
          <input v-else type="text" v-model="item.name" />
        </td>
        <td @dblclick="flag=!flag">
          <div v-if="flag" v-html="item.keyxx"></div>
          <input v-else type="text" v-model="item.keyxx" />
        </td>
        <td @dblclick="flag=!flag">
          <div v-if="flag" v-html="item.typexx"></div>
          <input v-else type="text" v-model="item.typexx" />
        </td>
        <td align="center">
          <input type="button" value="删除" @click="deletestr(item.id)" />
          <input type="button" value="修改" @click="editsrt(item.id)" />
          <input type="button" value="下载" @click="downsrt(item)" />
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
// @ is an alias to /src

export default {
  name: "Upload",
  data() {
    return {
      fileList: [],
      datamsg: [],
      stdymsg: [],
      id: "",
      name: "",
      urlxx:"",
      keyxx: "",
      typexx: "",
      sename: "",
      flag: true,
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess(response, file, fileList){
      this.getInfo2();
    },
    async getGoodsDesc() {
      const res = await this.$http.get("/download");
      console.log(res);
      var eleLink = document.createElement("a");
      eleLink.download = "aaa.txt";
      eleLink.style.display = "none";
      // 字符内容转变成blob地址
      var blob = new Blob([res.data], { type: "application/txt" });
      eleLink.href = URL.createObjectURL(blob);
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
    },

    async downsrt(row){
        var eleLink = document.createElement("a");
        eleLink.download = row.name;
        eleLink.innerHTML = row.name;
        if(row.typexx == 'image/png'){
            eleLink.href = 'http://127.0.0.1:3000/uploads/' + row.keyxx + '.png';
        }else if(row.typexx == 'application/vnd.ms-excel'){
            const res = await this.$http.get("/downloadFile?keyxx=" + row.keyxx);
            console.log(res);
            var blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
            eleLink.href = URL.createObjectURL(blob);
        }else{
            const res = await this.$http.get("/downloadFile?keyxx=" + row.keyxx);
            console.log(res);
            var blob = new Blob([res.data], { type: "application/txt" });
            eleLink.href = URL.createObjectURL(blob);
        }
        // eleLink.style.display = "none";
        // 字符内容转变成blob地址
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
    },

    async getList() {
      const res = await this.$http.get("/getimgsrc");
      console.log(res);
    },
    async getInfo() {
      const res = await this.$http.get("/getPostimg?name=" + this.sename);
      console.log(res);
      res.data.list.map((e) => {
        e.namexx = e.name.replace(
          this.sename,
          '<span style="color:#ff6700;">' + this.sename + "</span>"
        );
      });
      this.stdymsg = res.data.list;
    },
    async getInfo2() {
      const res = await this.$http.get("/getimgsrc");
      console.log(res);
      res.data.list.map((e) => {
        e.namexx = e.name;
      });
      console.log(res.data.list);
      this.stdymsg = res.data.list;
    },
    async postInfo() {
      const { data } = await this.$http.post("/getimgadd", {
        urlxx: this.urlxx,
        name: this.name,
        keyxx: this.keyxx,
        typexx: this.typexx,
      });
      console.log(data);
      this.getInfo2();
    },
    async deletestr(id) {
      const { data } = await this.$http.delete("/deleteimg?id=" + id);
      console.log(data);
      this.getInfo2();
    },
    async editsrt(id) {
      let newArr = this.stdymsg.filter((e) => {
        return e.id == id;
      });
      let params = newArr[0];
      const { data } = await this.$http.post("/editimg", params);
      this.getInfo2();
    },
  },
  created() {
        this.getInfo2();
    }
};
</script>
<style scoped>
/* *{
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
		box-sizing: border-box;
	} */
	body{
		padding: 20px;
	}
table input[type=text],
table input[type=number] {
    width: 100%;
    height: 36px;
    border: none;
}
ul li{
    margin-bottom: 10px;
}
ul li input{
    margin-left: 20px;
}
input[type=text],input[type=number]{
    outline: none;
    height: 36px;
    padding: 0 10px;
}
input:focus {
 border: 1px solid #2468a2;
}
</style>
